<template>
  <view class="physical-examination-detail">
    <div class="mecSubscribe">
      <div class="physical-examination-detail-title"><text class="solid"></text>您已拥有下列体检服务</div>
      <div class="banner-content">
        <div class="banner-content-name">{{ detail.productName }}</div>
      </div>

      <div v-if="detail.mecSubscribe && detail.mecSubscribeUrl" class="mecSubscribeUrl">
        <div class="physical-examination-detail-title"><text class="solid"></text>手机预约方法</div>
        <view class="mecSubscribeUrl-tips">
          ① 点击复制下方网址：
          <view>{{ detail.mecSubscribeUrl }}</view>
          <view class="copy" @click="copy">复制链接</view>
        </view>
        <view class="mecSubscribeUrl-tips">② 在手机浏览器粘贴网址，并打开该体检机构界面</view>
        <view class="mecSubscribeUrl-tips">③ 输入体检卡号密码完成预约</view>
      </div>
    </div>

    <div v-if="detail.productSpecification.length" class="doclist">
      <div class="physical-examination-detail-title"><text class="solid"></text>服务介绍</div>
      <ul>
        <li
          v-for="item in detail.productSpecification"
          :key="item.articleId"
          class="doclist-list"
          @click="view(item.articleId)"
        >
          <text class="doclist-list-mark"></text>{{ item.articleName }}
        </li>
      </ul>
    </div>

    <view class="tip"> 如遇体检卡密遗失等问题,请致电 <text class="color"> 400-010-1516</text> </view>
  </view>
</template>

<script>
import { sendSMS, binding } from '@/api/physicalExamination';

export default {
  data() {
    return {
      detail: {},
      patientId: ''
    };
  },

  onLoad: function (opt) {
    if (opt && opt.params && opt.patientId) {
      this.detail = JSON.parse(opt.params);
      this.patientId = opt.patientId;
    } else {
      uni.showModal({
        content: '参数错误',
        showCancel: false,
        success: function (res) {
          if (res.confirm) {
            uni.reLaunch({
              url: 'pages/index/index'
            });
          }
        }
      });
      // this.detail = {
      //   id: 3687,
      //   packageName: '体检非预约',
      //   productName: '撤单测试体检产品',
      //   productStatus: 20,
      //   notes: '',
      //   mecSubscribe: 1,
      //   mecSubscribeUrl: 'https://www.baidu.com',
      //   mecResultPdf: null,
      //   productSpecification: [
      //     { articleId: '656', articleName: 'nj4' },
      //     { articleId: '6', articleName: '隐私政策' }
      //   ],
      //   insuranceProductId: 79,
      //   mecCardsClose: 1,
      //   orderStatus: 3,
      //   projectType: 6
      // };
      // this.patientId = '813c339f42e54a23a2e79b22cda55b0e';
    }
  },

  methods: {
    async go_link() {
      if (this.detail.productStatus === 10) {
        // 未绑定
        const res = await binding({
          productId: this.detail.id, // 服务产品id
          patientId: this.patientId // 用户id
        });
        if (res.code !== 0) {
          uni.showToast({
            title: res.message,
            icon: 'none'
          });
          return;
        }
      } else {
        const res = await sendSMS(this.detail.id);
        if (res.code !== 0) {
          uni.showToast({
            title: res.message,
            icon: 'none'
          });
          return;
        }
      }
    },

    // 查看
    view(id) {
      this.$wxPromise.navigateTo({
        url: '/pages/service/agreeDetail?articleId=' + id
      });
    },

    // 复制到剪贴板
    copy() {
      uni.setClipboardData({
        data: this.detail.mecSubscribeUrl,
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

<style lang="scss">
@import './../style/common.scss';
.physical-examination-detail {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  &-title {
    font-size: 32rpx;
    color: #222222;
    font-weight: bold;
    .solid {
      width: 8rpx;
      height: 32rpx;
      background: #c8161d;
      opacity: 1;
      display: inline-block;
      margin-right: 16rpx;
    }
  }
  .mecSubscribe {
    padding: 32rpx;
    background: #ffffff;
    margin: 24rpx;
    border-radius: 16rpx;
    .banner-content {
      margin-top: 30rpx;
      margin-bottom: 30rpx;
      background: url('https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/topbg.png');
      border-radius: 16rpx;
      color: #ffffff;
      text-align: center;
      padding: 80rpx 0 56rpx;

      &-name {
        font-size: 40rpx;
        font-weight: 500;
        margin-bottom: 20rpx;
      }
      &-btn {
        font-size: 32rpx;
        border: 1px solid #ffffff;
        border-radius: 36rpx;
        width: 200rpx;
        line-height: 72rpx;
        margin: auto;
      }
    }
  }

  .doclist {
    margin: 24rpx;
    background: #ffffff;
    padding: 24rpx;
    border-radius: 16rpx;
    ._ul {
      margin-top: 40rpx;
    }
    &-list {
      font-size: 32rpx;
      color: #418dc7;
      display: flex;
      align-items: center;
      line-height: 1.8em;
      &-mark {
        width: 10rpx;
        height: 10rpx;
        background: #418dc7;
        display: inline-block;
        border-radius: 50%;
        margin-right: 10rpx;
      }
    }
  }

  .tip {
    text-align: center;
    color: rgba(0, 0, 0, 0.6);
    margin: 56rpx 0 40rpx;
    font-size: 28rpx;
    margin-top: auto;
    bottom: 0px;
    width: 100%;
    .color {
      font-weight: bold;
      color: #c8161d;
      padding-left: 10rpx;
    }
  }

  .mecSubscribeUrl {
    &-tips {
      padding: 6rpx 0;
      margin-top: 10rpx;
      .copy {
        background: #f34e1c;
        border-radius: 8rpx;
        padding: 8rpx 0;
        font-size: 32rpx;
        color: #ffffff;
        text-align: center;
        margin-top: 8rpx;
      }
    }
  }
}
</style>
